'use client';

import { defineComponent, ref } from 'vue';

export default defineComponent({
	name: 'PulsatingButton',
	props: {
		pulseColor: {
			type: String,
			default: '#0096ff',
		},
		duration: {
			type: String,
			default: '1.5s',
		},
	},
	setup(props, { slots }) {
		const className = ref(
			'relative text-center cursor-pointer flex justify-center items-center rounded-lg text-white dark:text-black bg-blue-500 dark:bg-blue-500 px-4 py-2'
		);

		return () => (
			<button
				class={className.value}
				style={{
					'--pulse-color': props.pulseColor,
					'--duration': props.duration,
				}}
			>
				<div class="relative z-10">{slots.default?.()}</div>
				<div class="absolute top-1/2 left-1/2 size-full rounded-lg bg-inherit animate-pulse -translate-x-1/2 -translate-y-1/2" />
			</button>
		);
	},
});
